<template lang="pug">
   el-container
    el-header
      h3 操作日志
      el-pagination(background @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="per_page" layout="total, prev, pager, next" :total="totalCount")
    el-main
      el-table(:data='dataList')
        el-table-column(prop='created_at' label='操作时间' width='200')
        el-table-column(prop='ip' label='操作ip' width='120')
        el-table-column(prop='user_id' label='操作用户' width='180')
        el-table-column(prop='path' label='操作路径' width='280')
        el-table-column(prop='method' label='操作方式' width='80')
        el-table-column(prop='parameter' label='操作参数' width='300')
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { logs_list} from "../../services";
import RemoteValidatorMixin from "../../components/RemoteValidatorAndTableEditMixin";

@Component({
  components: {},
  mixins: [RemoteValidatorMixin]
})
export default class Logs extends Vue {
  constructor() {
    super();
  }

  public mounted() {
    let self: any = this;
    this.$nextTick(function() {
      this.$on("update", async function() {
        let data: any = await logs_list(self.pageNum);
        if (data.success) {
          self.list = data.data;
        }
      });
      this.$emit("update");
    });
  }

}
</script>

<style lang="scss" scoped>
@import "../../../sass/variables";
.el-container {
  border: 1px solid $main-head-border-color;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

.el-header {
  border-bottom: 1px solid $main-head-border-color;
  background-color: $main-head-bg-color;
  line-height: 60px;

  h3 {
    float: left;
    margin: 0;
    padding: 0;
  }

  .el-pagination {
    float: right;
    padding-top: (60px - 20px) / 2;
  }
}

.fileurl {
  color: $gray;
  text-decoration: none;

}
.el-main {
  background-color: $white;
}
</style>
